<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="pc-container">
    <!-- 顶部导航区域 -->
    <el-row class="header-container">
      <el-col :span="24" class="header-content">
        <div class="header-actions">
          <el-button :icon="ArrowLeft" @click="onClickLeft" class="back-btn"></el-button>
          <el-breadcrumb :separator-icon="ArrowRight">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/category/' }">文物主体管理</el-breadcrumb-item>
                    <el-breadcrumb-item :to="{ path: '#' }" @click.native.prevent="goToMainPage(categoryid,categoryname)">
          {{ categoryname }}
        </el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '' }">文物列表</el-breadcrumb-item>
          </el-breadcrumb>
          <!-- <el-button :icon="ArrowLeft" @click="goBack" class="back-btn"></el-button>
          <h1 class="page-title">{{ categoryname }}<span class="slash">></span>文物详情列表</h1> -->
        </div>
        <!-- 搜索与上传区域 -->
        <div class="search-upload-group">
          <el-input v-model="searchKeyword" placeholder="搜索文物名称或主题" clearable @keyup.enter="handleSearch"
            class="search-input">
            <template #append>
              <!-- 修正图标引用方式，使用字符串形式 -->
              <el-button :icon="Search" @click="handleSearch">搜索</el-button>
            </template>
          </el-input>
          <!-- 修正图标引用方式 -->
          <el-button type="primary" :icon="Upload" @click="goToUpload" class="upload-btn">
            新增文物详情
          </el-button>
        </div>
      </el-col>
    </el-row>

    <!-- 状态显示区域 -->
    <div v-if="componentState === 'loading'" class="state-container loading-state">
      <div class="loading-text">加载中...</div>
    </div>

    <div v-else-if="componentState === 'empty' || relics.length === 0" class="state-container empty-state">
      <el-empty description="暂无文物数据" />
    </div>

    <div v-else-if="componentState === 'error'" class="state-container error-state">
      <el-empty description="加载失败，请重试" image="error">
        <template #bottom>
          <el-button type="primary" @click="reloadData">重试</el-button>
        </template>
      </el-empty>
    </div>

    <div v-else class="table-container">
      <el-table :data="relics" border stripe highlight-current-row :row-key="(row) => row.id" class="relic-table"
        :scroll-x="1600" @row-click="handleRowClick">
        <!-- <el-table-column prop="id" label="序号" width="80" align="center" /> -->
        <el-table-column label="序号" width="60" align="center">
          <template #default="scope">
            <span class="clickable-id">
              {{ (currentPage - 1) * pageSize + scope.$index + 1 }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="文物名称" width="100" align="center" />
        <el-table-column label="文物图像" width="200" align="center">
          <template #default="scope">
            <el-image v-if="scope.row.image_base64" :src="scope.row.image_base64" width="200" height="200" fit="cover"
              @error="handleImageError(scope.row)" :preview-src-list="[scope.row.image_base64]"
              :preview-teleported="true" @click.stop />
            <div v-else class="image-placeholder">图片加载失败</div>
          </template>
        </el-table-column>

        <!-- 彩画主题 -->
        <el-table-column label="彩画主题" width="140" align="center">
          <template #default="scope">
            {{ scope.row.painting_theme || '未知' }}
          </template>
        </el-table-column>

        <!-- 纹样类型 -->
        <el-table-column label="纹样类型" min-width="150" align="center">
          <template #default="scope">
            <!-- 使用与详情页相同的 formatArrayField 逻辑 -->
            {{ scope.row.pattern_types }}
          </template>
        </el-table-column>

        <!-- 构图形式 -->
        <el-table-column label="构图形式" width="120" align="center">
          <template #default="scope">
            {{ scope.row.composition_style }}
          </template>
        </el-table-column>

        <!-- 主色调 -->
        <el-table-column label="主色调" min-width="150" align="center">
          <template #default="scope">
            {{ scope.row.dominant_colors }}
          </template>
        </el-table-column>

        <!-- 病害类型 -->
        <el-table-column label="病害类型" min-width="180" align="center">
          <template #default="scope">
            <!-- 使用与详情页相同的 formatDiseaseTypes 逻辑 -->
            {{ scope.row.disease_types }}
          </template>
        </el-table-column>

        <!-- 病害程度 -->
        <el-table-column label="病害程度" width="100" align="center">
          <template #default="scope">
            {{ scope.row.disease_severity }}
          </template>
        </el-table-column>

        <el-table-column label="光谱图像" width="120" align="center">
          <template #default="scope">
            <el-tag :type="scope.row.hasSpectrum ? 'success' : 'warning'">
              {{ scope.row.hasSpectrum ? '已采集' : '未采集' }}
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column label="三维图像" width="120" align="center">
          <template #default="scope">
            <el-tag :type="scope.row.hasThreeD ? 'success' : 'warning'">
              {{ scope.row.hasThreeD ? '已采集' : '未采集' }}
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column label="创建时间" width="150" align="center">
          <template #default="scope">
            {{ formatDate(scope.row.created_at) }}
          </template>
        </el-table-column>

        <el-table-column label="最后修改" width="150" align="center">
          <template #default="scope">
            {{ scope.row.last_modified_at ? formatDate(scope.row.last_modified_at) : '未修改' }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100" align="center" fixed="right">
          <template #default="scope">
            <div class="operation-btn-group1">
              <div>
                <el-button type="primary" :icon="Edit" size="small" @click="goToEdit(scope.row.id)"
                  class="operation-btn">编辑</el-button>
              </div>
              <div style="margin-top: 10px;">
                <el-button type="success" :icon="Promotion" size="small" @click="goToDetail(scope.row.id)"
                  class="operation-btn">详情</el-button>
              </div>
              <div style="margin-top: 10px;">
                <el-button type="danger" :icon="Delete" size="small" @click="deleteRelic(scope.row.id)"
                  class="operation-btn">删除</el-button>
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页组件 -->
      <div class="pagination-container" v-if="totalPages > 0">
        <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[1, 5, 10, 20, 50]"
          :total="total" layout="total, sizes, prev, pager, next, jumper" @size-change="handlePageSizeChange"
          @current-change="handlePageChange" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useMainPage } from '@/components/composables/useMainPage'
import { ArrowRight } from '@element-plus/icons-vue'
import {
  ArrowLeft,
  Check,
  Delete,
  Edit,
  Upload,
  Promotion,
  Message,
  Search,
  Star,
} from '@element-plus/icons-vue'
import { useRoute } from 'vue-router'
// 移除所有Element Plus组件的导入，自动导入会处理
// 只保留业务逻辑的导入
const {
  currentPage,
  pageSize,
  searchKeyword,
  relics,
  total,
  totalPages,
  componentState,
  categoryid,
  categoryname,
  loadData,
  reloadData,
  handleSearch,
  handleImageError,
  getBuildingTypeText,
  getDiseaseTypesText,
  goToEdit,
  goToMainPage,
  deleteRelic,
  goBack,
  goToUpload,
  goToUser,
  goToDetail,
  handlePageSizeChange,
  handlePageChange,
  formatDate,
  handleDiseaseImageError,

} = useMainPage()
// 处理整行点击跳转详情页
const handleRowClick = (row: any) => {
  goToDetail(row.id)
}
</script>

<style scoped>
/* 样式保持不变 */
.pc-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
  box-sizing: border-box;
}

.header-actions {
  display: flex;
  justify-content: left;
  /* 标题居中显示 */
  margin-bottom: 20px;
  padding: 10px 0;
}

.page-title {
  margin: 0;
  font-size: 24px;
  color: #2c3e50;
  font-weight: 600;
}

.search-upload-group {
  display: flex;
  gap: 15px;
  /* 搜索框和按钮之间的间距 */
  align-items: center;
  width: 100%;
  max-width: 800px;
  /* 限制最大宽度，避免过宽 */
  margin: 10 auto;
  /* 居中显示 */
}

.search-input {
  flex: 1;
  /* 搜索框占满剩余空间 */
}

.upload-btn {
  white-space: nowrap;
  /* 防止按钮文字换行 */
}

.table-container {
  margin-top: 20px;
}

.back-btn {
  margin-right: 15px;
}

.slash {
  font-size: 1.3em;
  /* 放大斜杠 */
  margin: 0 5px;
  /* 左右留空 */
  color: #000000;
  /* 可选：调整颜色 */
  vertical-align: -5px;
  /* 微调垂直对齐（可选） */
}

.operation-group-vertical {
  display: flex;
  flex-direction: column;
  /* 纵向排列 */
  align-items: center;
  /* 水平居中 */
  justify-content: center;
  /* 垂直方向居中（可选） */
  height: 100%;
  gap: 15px;
  /* 按钮之间的间距 */

}

.relic-table :deep(.el-table__body tr:hover td) {
  cursor: pointer;
  background-color: #ace2fb79 !important;
}

.header-actions {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
  padding-bottom: 15px;
  border-bottom: 1px solid #e8e8e8;
}
</style>
